<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑订单</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <el-form :model="form" label-width="80px">
            <el-form-item label="订单编号">
                <el-input v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item label="订单金额">
                <el-input v-model="form.totalDmount"></el-input>
            </el-form-item>
            <el-form-item label="下单时间">
                <el-date-picker v-model="form.orderDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select v-model="form.orderStatus">
                    <el-option label="待处理" value="Pending"></el-option>
                    <el-option label="处理中" value="Processing"></el-option>
                    <el-option label="已发货" value="Delivered"></el-option>
                    <el-option label="已收货" value="Succeed"></el-option>
                    <el-option label="订单取消" value="Cancelled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="收货人">
                <el-input v-model="form.receiver"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    form: {
                        orderNo: '',
                        orderAmount: '',
                        orderTime: '',
                        orderStatus: '',
                        receiver: '',
                        address: '',
                        phone: '',
                        remark: ''
                    }
                }
            },
            methods: {
                submit() {
                    axios.post('/api/orders', this.form)
                       .then(response => {
                            console.log(response.data);
                            alert('保存成功');
                        })
                       .catch(error => {
                            console.log(error);
                            alert('保存失败');
                        });
                }
            }
        })
    </script>
</body>
</html>